<template>
	<view class="out-work-user-list" :style="type==1?'padding-top: 56px':''">
		<view class="top" v-if="type == 0">
			<view class="left" @click="prev">
				<uni-icons type="left" size="12" color="#0055ff"></uni-icons>上一步
			</view>
			<view class="right" @click="next">
				下一步<uni-icons type="right" size="12" color="#0055ff"></uni-icons>
			</view>
		</view>
		<view class="out-list">
			<view class="save-box" @click="queryUser" v-if="type == 0">新增</view>
			<view class="list">
				<uni-table stripe emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center" width="50px">工号</uni-th>
						<uni-th align="center">姓名</uni-th>
						<uni-th align="center" width="100px">姓名</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="out in outWorkEntities">
						<uni-td align="center">{{out.jobNumber}}</uni-td>
						<uni-td align="center">{{out.name}}</uni-td>
						<uni-td align="center">
							<view class="uni-group">
								<button class="uni-button" size="mini" type="warn" @click="deleteOut(out)">删除</button>
							</view>
						</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
		<!-- 添加人员 -->
		<view class="bottom-modal-box">
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content">
					<view class="item" v-for="data in userEntities" @click="loadModalUser(data)">
						{{data.name}}
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		api,
		post
	} from '@/util/api.js'
	export default {
		props: {
			expenseId: '',
			type: 0, // 1表示是查看出差人员详情
		},
		data() {
			return {
				userEntities: [],
				outWorkEntities: [],
			}
		},
		created() {
			this.queryList()
		},
		methods: {
			prev() {
				uni.$emit('changeTab', 0, this.expenseId)
			},
			next() {
				uni.$emit('changeTab', 2, this.expenseId)
			},
			async queryUser() {
				let res = await post(api.UserEntities, {})
				this.userEntities = res.data
				this.$refs.popup.open('bottom')
			},
			queryList() {
				post(api.OutWorkList, {
					expenseId: this.expenseId
				}).then(res => {
					this.outWorkEntities = res.data
				})
			},
			loadModalUser(user) {
				let workUser = {
					userId: user.id,
					expenseId: this.expenseId
				}
				// 保存
				post(api.SaveOutWork, workUser).then(res => {
					this.queryList()
					this.$refs.popup.close()
				})
			},
			deleteOut(out) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '你确定要删除吗',
					success: function(res) {
						if (res.confirm) {
							post(api.DeleteOutWork, {
								id: out.id
							}).then(res => {
								uni.showToast({
									icon: 'none',
									title: res.message
								})
								that.queryList()
							})
						}
					},
				})
			}
		}
	}
</script>

<style>
	@import '../../static/css/OutworkUserList.css';
</style>